$(function () {
    // ---------------  创建剪裁区 ------------------
    // - 找到剪裁区的图片 （img#image）
    var $image = $('#image');
    // - 设置配置项
    var option = {
        // 纵横比(宽高比)
        aspectRatio: 1, // 正方形
        // 指定预览区域
        preview: '.img-preview' // 指定预览区的类名（选择器）
    };
    // - 调用cropper方法，创建剪裁区
    $image.cropper(option);

    // 2.点击上传触发input:file 文件按钮===>来给用户上传文件
    $('#uploadBtn').on('click', function () {
        // 给文件表单触发点击
        $('#file').click()
    })
    // 3.给input:file按钮注册change事件(value值改变时触发) 文件域内容发什么改变触发
    $('#file').on('change', function () {
        // console.log(this.value); 假路径浏览器为了不暴露你的路径行踪
        let file = $(this)[0].files[0]
        console.log(file);
        // 文件非空效验
        if (file === undefined) {
            return layer.msg('请上传文件!')
        }
        // 给文件对象创建零时的路径
        let tempUrl = URL.createObjectURL(file)
        // 3.3 更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
        $image.cropper('replace', tempUrl);
    })
    // 4.点击确定按钮发送ajax
    $('#comfirmBtn').on('click', function () {
        // 1. 剪裁图片，得到canvas
        var canvas = $image.cropper('getCroppedCanvas', { width: 30, height: 30 });
        // 2. 把canvas转成base64格式字符串
        var base64 = canvas.toDataURL();
        console.log(base64)
        // 3.发送ajax
        axios({
            method: 'POST',
            url: '/my/update/avatar',
            data: 'avatar=' + encodeURIComponent(base64)
        }).then(res => {
            // 重新渲染头部信息
            window.parent.getUserInfo()
        })
    })
})